<template>
	<view class="good-details">
		<!-- 公共头部 -->
		<head-goods :HeadShow="HeadShow" v-if="shopInfo" :HeadActive="headIndex" @goScroll="scrollGo"></head-goods>
		<head-goods-search title="蝶丝商城" v-if="!shopInfo"></head-goods-search>
		<!-- 轮播 -->
		<view class="swiper-container" :class="{banneTop:!shopInfo}">
			<swiper class="hd-swiper" @change="bannerChange" circular="true" autoplay="true" interval="3000">
				<swiper-item class="hd-swiper-item" v-for="(item,index) in  banners" :key="index">
					<image :src="item" />
				</swiper-item>
			</swiper>
			<view class="swiper-int-box" v-if="banners.length>1">
				{{bannerActive+1}}/{{banners.length}}
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="goods-info">
			<view class="goods-info-title">
				<view class="h3">￥<text class="span">{{nprice?nprice:baseInfo.price}}</text></view>
				<view>收藏</view>
			</view>
			<view class="h2">{{baseInfo.title}}</view>
		</view>
		<!-- 无质量问题 -->
		<view class="service">
			<view class="h3" style="width:100%;color:#999">
				提示：
				<view class="span" style="width:87%;color:#999">本产品无质量问题不支持退换货</view>
			</view>
		</view>
		<view class="service" style="margin-top:0;border-top:1px solid #eee;">
			<view class="h3" style="width:100%">
				服务：
				<view class="div" style="width:87%">
					<view class="div">
						<view class="p"><i class="hd-icon">&#xe609;</i></view>正品保障
					</view>
					<view class="div">
						<view class="p"><i class="hd-icon">&#xe64f;</i></view>安全支付
					</view>
					<view class="div">
						<view class="p"><i class="hd-icon">&#xe620;</i></view>闪电发货
					</view>
					<view class="div">
						<view class="p"><i class="hd-icon">&#xe638;</i></view>售后无忧
					</view>
				</view>
			</view>
		</view>

		<!-- 规格 -->
		<view class="service" @click="showSpecifications">
			<view class="h3" style="width:100%">
				选择：
				<view class="span" style="width:84%;color:#999">{{sku_list.length<=1?gName:'规格选择'}}</view>
				<i class="hd-icon">&#xe601;</i>
			</view>
		</view>
		<!-- 属性 -->
		<view class="service" style="margin-top:0;border-top:1px solid #eee;" @click="showSm=true">
			<view class="h3" style="width:100%">
				属性：
				<view class="span" style="width:84%;color:#999">基础信息</view>
				<i class="hd-icon">&#xe601;</i>
			</view>
		</view>
		<!-- 运费 -->
		<view class="service" style="margin-top:0;border-top:1px solid #eee;">
			<view class="h3" style="width:100%">
				运费：
				<view class="span" style="width:87%;color:#999">10元（满50包邮）</view>
			</view>
		</view>
		<!-- 服务协议 -->
		<view class="service" style="margin-top:0;border-top:1px solid #eee;margin-bottom:20rpx;" @click="showDialogService">
			<view class="h3" style="width:100%;color:#999">服务：
				<view class="div" style="width:84%;color:#999;margin-left:10rpx;">
					<view class="span" style="color:#999">保密配送</view>
					<view class="span" style="color:#999">正品保证</view>
					<view class="span" style="color:#999">在线支付包邮</view>
				</view>
				<i class="hd-icon">&#xe601;</i>
			</view>
		</view>
		<!-- 微信顾问 -->
		<we-chat-user v-if="!shopInfo" :name="wxInfo.weixin_name" :imgUrl="wxInfo.weixin_image"></we-chat-user>
		<we-chat-user v-else :name="siteInfo.weixin_name" :imgUrl="siteInfo.weixin_image"></we-chat-user>
		<!-- 评论区域 -->
		<view class="details-rote" style="margin-bottom:20rpx" v-if="commentList||goodsCommentList">
			<view class="details-rote-title">
				<view class="h3">商品评价</view>
				<view class="p" v-if="shopInfo">已有{{commentList.length}}条评论</view>
			</view>
			<view class="details-rote-list" v-if="shopInfo">
				<view class="li" v-for="(item,index) in commentList" :key="index">
					<view class="details-rote-head">
						<view class="details-rote-head-left">
							<view class="details-rote-head-lefts">
								<image :src="item.logo" />
								<view class="div">
									<view class="h3">{{item.nickname}}</view>
									<view class="start-list">
										<view class="hd-icon">&#xe608;</view>
										<view class="hd-icon">&#xe608;</view>
										<view class="hd-icon">&#xe608;</view>
										<view class="hd-icon">&#xe608;</view>
										<view class="hd-icon">&#xe608;</view>
									</view>
								</view>
							</view>
						</view>
						<view class="p">发表于{{item.addtime}}</view>
					</view>
					<view class="p">{{item.content}}</view>
				</view>
			</view>
			<view class="details-rote-list" v-if="!shopInfo">
				<view class="li" v-for="(item,index) in goodsCommentList" :key="index">
					<view class="details-rote-head">
						<view class="details-rote-head-left">
							<view class="details-rote-head-lefts">
								<image :src="item.logo" />
								<view class="div">
									<view class="h3">{{item.nickname}}</view>
									<view class="start-list">
										<view class="hd-icon">&#xe608;</view>
										<view class="hd-icon">&#xe608;</view>
										<view class="hd-icon">&#xe608;</view>
										<view class="hd-icon">&#xe608;</view>
										<view class="hd-icon">&#xe608;</view>
									</view>
								</view>
							</view>
						</view>
						<view class="p">发表于{{item.addtime}}</view>
					</view>
					<view class="p">{{item.content}}</view>
				</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="details-menu" v-if="shopInfo">
			<view class="li" :class="{active:isActive==0}" @click="menuChange(0)">图文介绍</view>
			<view class="li" :class="{active:isActive==1}" @click="menuChange(1)">售后保障</view>
		</view>
		<view class="details-swiper" style="padding-top:20rpx;" v-if="shopInfo">
			<view class='details-goods' v-if="isActive==0">
				<jyf-parser :tag-style="tagStyle" lazy-load show-with-animation use-cache class="details-images" :html="content"
				 ref="article"></jyf-parser>
			</view>
			<view class="guarantee" v-if="isActive==1">
				<view v-html="detailsInfo.baseInfo.tips"></view>
			</view>
		</view>
		<view class="like">
			<view class="h3">相似推荐</view>
			<view class="like-list">
				<view class="li" v-for="(item,index) in salesGoodsList" :key="index">
					<image :src="item.logo" @click="navigateGoods(item.id)" />
					<view class="like-list-right">
						<view class="h3" @click="navigateGoods(item.id)">{{item.title}}</view>
						<view class="like-list-right-desc">
							<view class="p">￥{{item.price}}</view>
							<view class="like-list-right-desc-price">
								<view class="div">
									<i class="hd-icon">&#xe600;</i>
								</view>
								<view class="p" @click="buyGoods(item.id)">立即购买</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="like" v-if="askList.length>=1">
			<view class="h3">相关回答</view>
			<view class="answers-container">
				<view class="answers-list">
					<view class="li" v-for="(item,index) in askList" :key="index" @click="navigateTo('/pages/answers/details?id='+item.id)">
						<view class="answers-q">
							<view class="h3">
								<view class="span">Q</view>{{item.stitle}}
							</view>
							<view class="p">
								<view class="span">{{item.count?item.count:0}}</view>个回答
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<fab :topBtn="isTopBtn"></fab>
		<graceBottomDialog :show="showService" v-on:closeDialog="showService=false">
			<view slot="content">
				<view class="service-title">服务<span class="hd-icon" @click="showService=false">&#xe655;</span></view>
				<scroll-view scroll-y class="service-content">
					<view class="service-desc-title">
						<i></i>
						权利声明：
					</view>
					<view class="service-desc-cont">商城上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是商城重要的经营资源，未经许可，禁止非法转载使用。</view>
					<view class="service-desc-cont">注：本站商品信息（含产品及模特照片）均来自于合作方，其真实性、准确性和合法性由信息拥有者（合作方）负责。本站不提供任何保证，并不承担任何法律责任。买家在商城购买产品并付款成功，即视为买家已认可并同意将卖家发货地作为双方之间的合同履约地。如不认同，请勿购买。</view>
					<view class="service-desc-title">
						<i></i>
						价格说明：
					</view>
					<view class="service-desc-cont">商城价为商品的销售价，是您最终决定是否购买商品的依据。</view>
					<view class="service-desc-cont">商品展示的划横线价格为参考价，并非原价，该价格可能是品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价（如厂商指导价、建议零售价等）或该商品在商城平台上曾经展示过的销售价；由于地区、时间的差异性和市场行情波动，品牌专柜标价、商品吊牌价等可能会与您购物时展示的不一致，该价格仅供您参考。</view>
				</scroll-view>
				<view class="service-btn" @click="showService=false">确定</view>
			</view>
		</graceBottomDialog>
		<!-- 商品规格 -->
		<graceBottomDialog :show="specifications" v-on:closeDialog="closeSpecifications">
			<view slot="content">
				<div class="gg-cont">
					<view class="goods-dialog-list">
						<img class="goods-dialog-img" :src="gImg">
						<div class="goods-dialog-cont">
							<h3>￥{{gPrice==null?'已售完':gPrice}}</h3>
							<p v-if="gStock">库存：{{gStock}}</p>
							<p>{{gName}}</p>
						</div>
						<span class="hd-icon" @click="closeSpecifications">&#xe655;</span>
					</view>
					<scroll-view scroll-y class="fications-content" v-if="sku_list.length>=1">
						<div class="dialog-fications">
							<h3>{{baseInfo.sku_name}}：</h3>
							<view class="dialog-fications-list" v-if="isShowImage">
								<view class="dialog-fications-item" v-for="(item,index) in sku_list" :key="index">
									<img @click="checkImg(item,index)" :class="{active:isActiveImg==index}" :src="item.image" />
								</view>
							</view>
							<view class="dialog-fications-list" v-if="!isShowImage">
								<view class="dialog-fications-item noImg" :class="{active:isActiveImg==index}" @click="checkImg(item,index)"
								 v-for="(item,index) in sku_list" :key="index">
									<span>{{item.name}}</span>
								</view>
							</view>
						</div>
					</scroll-view>
					<div class="goods-num">
						<h3>数量：</h3>
						<div>
							<span @click="closeNum">-</span><span>{{num}}</span><span @click="addNum">+</span>
						</div>
					</div>
					<div class="goods-btns">
						<view @click="shop(false)" v-if="shopBtn">确定</view>
						<view @click="payIng" v-if="!shopBtn">确定</view>
					</div>
				</div>
			</view>
		</graceBottomDialog>
		<!-- 说明 -->
		<graceBottomDialog :show="showSm" v-on:closeDialog="showSm=false">
			<view slot="content">
				<view class="service-title">属性<span class="hd-icon" @click="showSm=false">&#xe655;</span></view>
				<scroll-view scroll-y class="service-content">
					<view class="service-sm">
						<view class="li" v-for="(item,index) in baseInfo.attr_list" :key="index">
							<h3>{{item.title}}</h3>
							<p>{{item.content}}</p>
						</view>
					</view>
				</scroll-view>
				<view class="service-btn" @click="showSm=false">确定</view>
			</view>
		</graceBottomDialog>
		<shop-bottom></shop-bottom>
	</view>
</template>

<script>
	import weChatUser from '@/components/WeChatUser'; //微信客服
	import pages from '@/components/pages'; //分页
	import fab from '@/components/fab'; //快捷菜单
	import graceBottomDialog from '@/graceUI/components/graceBottomDialog.vue'; //底部对话框
	import {
		goodsDetails,
		saveOrderCart
	} from '@/api/goods';
	import {
		commentDetails
	} from '@/api/rote';
	import parser from "@/components/jyf-parser/jyf-parser";
	import graceNavBar from "@/graceUI/components/graceNavBar.vue";
	import {
		getAuth
	} from '@/api/user';
	export default {
		data() {
			return {
				shopBtn: false,
				isTopBtn: false,
				listHeight: 0, //内部的高度
				swiperHeight: 0, //外部的高度
				showService: false,
				specifications: false,
				detailsInfo: '',
				isActive: 0,
				gPrice: '',
				gName: '',
				gStock: '',
				gImg: '',
				likeTop: '',
				menuTop: '',
				roteTop: '',
				headIndex: 0,
				shopInfo: true,
				isActiveImg: 0,
				bannerActive: 0,
				tagStyle: {
					img: 'width:100%;display: block;'
				},
				num: 1,
				sku_data_id: '',
				nprice: '',
				goods_id: '',
				HeadShow: true,
				showSm: false,
				banners: [],
				gname: '',
				baseInfo: [],
				sku_list: [],
				wxInfo: [],
				siteInfo: [],
				commentList: [],
				salesGoodsList: [],
				goodsCommentList: [],
				askList: [],
				content: '',
				tips: '',
			}
		},
		components: {
			fab,
			weChatUser,
			pages,
			graceBottomDialog,
			"jyf-parser": parser,
		},
		watch: {
			detailsInfo(n) {
				let isTrue = n.baseInfo.sku_list.every((item) => {
					return item.image != '';
				})
				this.isShowImage = isTrue;
			}
		},
		onLoad(e) {
			if (e.id) {
				this.goods_id = e.id;
				goodsDetails(e.id).then((res) => {
					if (res.data.msg == '商品不存在或已被下架') {
						uni.showModal({
							title: '提示',
							content: '商品不存在或已被下架',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack({
										delta: 1
									});
								}
							}
						});
						return;
					}
					this.detailsInfo = res.data.datas;
					const {
						siteInfo,
						baseInfo,
						commentList,
						goodsCommentList,
						salesGoodsList,
						askList
					} = res.data.datas;
					this.siteInfo = siteInfo
					this.baseInfo = baseInfo
					this.commentList = commentList
					this.salesGoodsList = salesGoodsList
					this.goodsCommentList = goodsCommentList
					this.askList = askList
					this.sku_list = baseInfo.sku_list
					this.banners = baseInfo.logo_array
					this.content = baseInfo.content
					this.tips = baseInfo.tips
					if (baseInfo.sku_list[0]) {
						this.gname = baseInfo.sku_list[0].name
					}
					/* 初始化规格 */
					if (this.sku_list.length <= 1) {
						if (this.sku_list.length == 1) {
							let info = this.sku_list[0];
							this.gPrice = info.price;
							this.gName = info.name;
							this.gStock = info.stock;
							this.gImg = info.image ? info.image : this.banners[0];
							this.sku_data_id = info.sku_id;
							this.nprice = info.price;
						} else {
							this.gPrice = this.baseInfo.price;
							this.gName = this.baseInfo.title;
							this.gImg = this.banners[0];
							this.gStock = 99;
							this.sku_data_id = '';
							this.nprice = this.baseInfo.price;
						}
					} else {
						this.isActiveImg = -1;
						this.gPrice = this.baseInfo.price;
						this.gName = this.baseInfo.title;
						this.gImg = this.banners[0];
					}
				})
			} else {
				this.goods_id = e.roteid;
				commentDetails(e.roteid).then((res) => {
					if (res.data.msg == '商品不存在或已被下架') {
						uni.showModal({
							title: '提示',
							content: '商品不存在或已被下架',
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack({
										delta: 1
									});
								}
							}
						});
						return;
					}
					this.shopInfo = false;
					this.detailsInfo = res.data.datas;
					const {
						wxInfo,
						baseInfo,
						goodsCommentList,
						salesGoodsList,
						askList
					} = res.data.datas;
					this.wxInfo = wxInfo
					this.baseInfo = baseInfo
					this.salesGoodsList = salesGoodsList
					this.goodsCommentList = goodsCommentList
					this.askList = askList
					this.sku_list = baseInfo.sku_list
					this.banners = baseInfo.logo_array
					this.content = baseInfo.content
					this.tips = baseInfo.tips
					if (baseInfo.sku_list[0]) {
						this.gname = baseInfo.sku_list[0].name
					}
					/* 初始化规格 */
					if (this.sku_list.length <= 1) {
						if (this.sku_list.length == 1) {
							let info = this.sku_list[0];
							this.gPrice = info.price;
							this.gName = info.name;
							this.gStock = info.stock;
							this.gImg = info.image ? info.image : this.banners[0];
							this.sku_data_id = info.sku_id;
							this.nprice = info.price;
						} else {
							this.gPrice = this.baseInfo.price;
							this.gName = this.baseInfo.title;
							this.gImg = this.banners[0];
							this.gStock = 99;
							this.sku_data_id = '';
							this.nprice = this.baseInfo.price;
						}
					} else {
						this.isActiveImg = -1;
						this.gPrice = this.baseInfo.price;
						this.gName = this.baseInfo.title;
						this.gImg = this.banners[0];
					}
				})
			}
			this.$nextTick(() => {
				uni.createSelectorQuery().select(".details-rote").boundingClientRect((res) => {
					if (res) {
						this.roteTop = res.top;
					}
				}).exec()
				uni.createSelectorQuery().select(".details-menu").boundingClientRect((res) => {
					this.menuTop = res.top;
				}).exec()
				uni.createSelectorQuery().select(".like").boundingClientRect((res) => {
					this.likeTop = res.top;
				}).exec()
			})
		},
		onPageScroll(e) {
			if (0 < e.scrollTop && e.scrollTop < this.roteTop) {
				this.headIndex = 0;
			}
			if (this.roteTop < e.scrollTop && e.scrollTop < this.menuTop) {
				this.headIndex = 1;
			}
			if (this.menuTop < e.scrollTop && e.scrollTop < this.likeTop) {
				this.headIndex = 2;
			}
			if (this.likeTop < e.scrollTop) {
				this.headIndex = 3;
			}
			if (e.scrollTop >= 100) {
				this.HeadShow = false
			}
			if (e.scrollTop >= 400) {
				this.isTopBtn = true
			}
			if (e.scrollTop <= 100) {
				this.isTopBtn = false
				this.HeadShow = true
			}
		},
		computed: {
			userInfo() {
				return getAuth();
			}
		},
		onShow() {},
		methods: {
			navigateGoods(id) {
				this.$Shop.navigateGoods(id);
			},
			buyGoods(id) { //立即购买
				this.$Shop.navigateGoods(id)
			},
			payIng() { //立即购买按钮
				this.shop(true)
			},
			shop(type) {
				let shopName = '';
				if (this.isActiveImg == -1) {
					uni.showToast({
						title: '请选择规格 ',
						icon: 'none'
					})
					return
				}
				if (this.sku_list.length >= 1) {
					if (!this.sku_data_id || this.gStock == 0) {
						uni.showModal({
							title: '提示',
							content: '商品已售罄,立即返回？',
							showCancel: true,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack({
										delta: 1
									});
								}
							}
						});
						return
					}
				}
				shopName = this.detailsInfo.siteName
				let data = {
					checked: true,
					id: this.detailsInfo.baseInfo.id,
					name: shopName,
					list: [{
						id: this.goods_id,
						cartId: this.sku_data_id,
						logo: this.gImg,
						title: this.gName,
						sku_name: this.detailsInfo.baseInfo.sku_list[this.isActiveImg] ? this.detailsInfo.baseInfo.sku_list[this.isActiveImg]
							.name : this.gName,
						buyNum: this.num,
						money: this.gPrice,
						moneyAll: this.num * this.gPrice
					}]
				}
				this.$Shop.setGoodsCart(data)
				if (type) {
					this.$Shop.setStorage('orderCar', JSON.stringify(this.$Shop.changeGoodsCart(JSON.stringify([data]))));
					this.$Shop.navigateOrder();
				} else {
					uni.showToast({
						title: '成功加入购物车',
						icon: 'none'
					})
				}
				//this.$Shop.navigateCart();
			},
			closeNum() {
				if (this.num <= 1) {
					uni.showToast({
						title: '不能再减了',
						icon: 'none'
					})
				} else {
					this.num--
				}
			},
			addNum() {
				this.num++
			},
			bannerChange(e) {
				this.bannerActive = e.detail.current;
			},
			checkImg(item, index) {
				this.num = 1;
				this.isActiveImg = index;
				this.gPrice = item.price;
				this.gName = item.name;
				this.gStock = item.stock;

				if (item.image) {
					this.gImg = item.image
				}
				this.sku_data_id = item.sku_id;
				this.nprice = item.price;
			},
			scrollGo(index) {
				if (index == 0) {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
				}
				if (index == 1) {
					uni.pageScrollTo({
						selector: '.details-rote',
						duration: 300
					});
				}
				if (index == 2) {
					uni.pageScrollTo({
						selector: '.details-menu',
						duration: 300
					});
				}
				if (index == 3) {
					uni.pageScrollTo({
						selector: '.like',
						duration: 300
					});
				}
			},
			menuChange(index) {
				this.isActive = index;
			},
			showDialogService() {
				this.showService = true;
			},
			closeDialogService() {
				this.showService = false;
			},
			showSpecifications(e) {
				this.specifications = true;
				if (e == 0) {
					this.shopBtn = true
				} else {
					this.shopBtn = false
				}
			},
			closeSpecifications() {
				this.specifications = false;
			},
			trigger(e) {
				uni.redirectTo({
					url: e.item.url
				});
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			goShop() {
				uni.reLaunch({
					url: `../shop/index?id=${this.detailsInfo.baseInfo.site_nei_id}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.banneTop {
		margin-top: 90rpx;
	}

	.service-sm {
		.li {
			display: flex;
			justify-content: space-around;
			align-items: center;

			h3 {
				width: 100rpx;
				color: #999;
				font-size: 24rpx;
			}

			p {
				width: 500rpx;
				font-size: 24rpx;
			}

			padding:20rpx;
			border-bottom:1px solid #eee;
		}
	}

	.service {
		.h3 {
			font-size: 24rpx !important;
			color: #999;

			span {
				font-size: 24rpx;
				color: #999;
			}

			&>.div {
				display: flex;
				justify-content: flex-start;

				.div {
					display: flex !important;
					justify-content: flex-start;
					align-items: center;
					font-size: 24rpx;
					color: #999;
					margin-right: 10rpx;

					.p {
						width: 40rpx;
						height: 40rpx;
						text-align: center;
						line-height: 40rpx;
						color: #fff;
						background: #ed1475;
						border-radius: 50%;
					}

					margin-left:10rpx;
				}
			}
		}
	}

	.swiper {
		width: 100%;
		height: 388rpx;
	}

	.demo {
		width: 100%;
		height: 388rpx;
		background-color: #F5F6F8;
		text-align: center;
	}

	.demo-txt {
		line-height: 388rpx;
		color: #999999;
		font-size: 50rpx;
	}

	.swiper-container {
		position: relative;

		.hd-swiper {
			width: 100%;
			height: 375px;
			background: #fff;

			.hd-swiper-item {
				width: 100%;
				height: 100%;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.swiper-int-box {
			width: 192rpx;
			padding: 24rpx 0;
			position: absolute;
			bottom: 28rpx;
			right: 0;
			background: rgba(154, 147, 147, 0.6);
			text-align: center;
			border-top-left-radius: 76rpx;
			border-bottom-left-radius: 76rpx;
			color: #fff;
		}
	}

	.goods-info {
		border-top: 1px solid #eee;
		background: #fff;
		padding-bottom: 40rpx;

		.goods-info-title {
			width: 710rpx;
			margin: 0 auto;
			padding-top: 30rpx;
			display: flex;
			justify-content: space-between;

			.h3 {
				color: #ed1475;
				font-size: 24rpx;

				.span {
					font-size: 40rpx;
					font-weight: bold;
				}
			}
		}

		.h2 {
			width: 710rpx;
			margin: 0 auto;
			padding-top: 10rpx;
			display: flex;
			font-size: 28rpx;
		}
	}

	.service {
		padding: 20rpx 10rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;

		.h3 {
			color: #7F7F7F;
			font-size: 28rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.span {
				display: inline-block;
				color: #181818;
				margin-left: 10rpx;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				white-space: nowrap; //溢出不换行
			}
		}

	}

	.details-menu {
		background: #fff;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #eee;

		.li {
			width: 50%;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 32rpx;

			&.active {
				color: #FF273F;
			}
		}
	}

	.details-swiper {
		background: #fff;
		padding-bottom: 40rpx;

		.details-goods {
			width: 710rpx;
			margin: 0 auto;

			h3 {
				color: #ff468f;
				font-size: 28rpx;
				border-bottom: 1px solid #eee;
				padding: 20rpx 0;
				margin-bottom: 20rpx;
			}

			.details-images {
				image {
					display: block;
					width: 100%;
				}

				margin-bottom:20rpx;
			}

			.details-cont {
				image {
					display: block;
					width: 100%;
					margin-bottom: 20rpx;
				}

				p {
					background: #FFF8F5;
					color: #7F1911;
					padding: 20rpx 40rpx;
					font-size: 24rpx;
					line-height: 32rpx;
					margin-bottom: 20rpx;
				}
			}
		}

		// 详细参数
		.details-desc {
			width: 710rpx;
			margin: 0 auto;

			&>h3 {
				color: #ff468f;
				font-size: 28rpx;
				border-bottom: 1px solid #eee;
				padding: 20rpx 0;
				margin-bottom: 20rpx;
			}

			ul {
				li {
					margin-bottom: 40rpx;

					h3 {
						color: #333;
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}

					p {
						color: #a3a3a3;
						font-size: 28rpx;
						line-height: 36rpx;
					}
				}
			}
		}

		.guarantee {
			width: 710rpx;
			margin: 0 auto;

			&>h3 {
				color: #ff468f;
				font-size: 28rpx;
				border-bottom: 1px solid #eee;
				padding: 20rpx 0;
				margin-bottom: 20rpx;
			}

			p {
				background: #FFF8F5;
				color: #7F1911;
				padding: 20rpx 40rpx;
				font-size: 24rpx;
				line-height: 32rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.details-rote {
		background: #fff;
		border-top: 1px solid #eee;
		padding: 20rpx 0;

		.details-rote-title {
			width: 710rpx;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #eee;
			padding-bottom: 20rpx;

			.h3 {
				position: relative;
				padding-left: 20rpx;

				&::before {
					display: block;
					content: '';
					color: #333;
					width: 4px;
					height: 22px;
					background: #ed1475;
					position: absolute;
					left: 0rpx;
				}
			}

			.h3,
			.p {
				font-size: 28rpx;
				color: #343434;
			}
		}

		.details-rote-list {
			&>.li {
				width: 710rpx;
				margin: 0 auto;
				padding: 30rpx 0;
				border-bottom: 1px solid #eee;

				&>.p {
					color: #666;
					font-size: 28rpx;
					line-height: 36rpx;
					margin-top: 20rpx;
				}

				.details-rote-head {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.p {
						font-size: 24rpx;
						color: #999;
					}

					.details-rote-head-left {
						display: flex;
						justify-content: space-between;

						.details-rote-head-lefts {
							display: flex;
							justify-content: flex-start;

							image {
								width: 100rpx;
								height: 100rpx;
								border-radius: 50%;
								margin-right: 20rpx;
							}

							.div {
								.h3 {
									font-size: 24rpx;
									color: #343434;
									margin-bottom: 10rpx;
									margin-top: 20rpx;
								}

								.start-list {
									display: flex;
									justify-content: flex-start;

									.hd-icon {
										color: #f4ba09;
										font-size: 24rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	}

	.like {
		margin-top: 20rpx;
		background: #fff;

		&>.h3 {
			padding: 20rpx;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 40rpx;

			&::before {
				display: block;
				content: '';
				color: #333;
				width: 4px;
				height: 22px;
				background: #ed1475;
				position: absolute;
				left: 20rpx;
			}
		}

		.like-list .li {
			padding: 20rpx;
			border-bottom: 1px solid #eee;
			display: flex;
			justify-content: space-between;

			image {
				width: 210rpx;
				height: 210rpx;
				box-shadow: 0px 0px 10px 3px #eee;
			}

			.like-list-right {
				width: 458rpx;
				position: relative;

				.h3 {
					font-size: 24rpx;
					color: #333;
				}

				.like-list-right-desc {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					position: absolute;
					bottom: 0;

					&>.p {
						font-size: 24rpx;
						color: #ed1475;

						.span {
							color: #999;
							font-size: 22rpx;
							text-decoration: line-through;
							margin-left: 10rpx;
						}
					}

					.like-list-right-desc-price {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						border: 2px solid #ed1475;
						background-color: #ed1475;
						padding-right: 10rpx;
						border-radius: 8rpx;

						.div {
							background: #fff;
							padding: 8rpx 12rpx;
							margin-right: 10rpx;

							i {
								color: #ed1475;
							}
						}

						.p {
							color: #fff;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}

	.answers-container {
		margin-top: 20rpx;
		padding-top: 20rpx;
		background: #fff;

		.answers-list {
			width: 700rpx;
			margin: 0 auto;

			.li {
				padding-bottom: 20rpx;
				border-bottom: 1px dotted #eee;
				margin-bottom: 20rpx;
			}

			.answers-q {
				display: flex;
				justify-content: space-between;


				.h3 {
					margin-bottom: 10rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					color: #fd8197;
					font-size: 13px;

					.span {
						display: block;
						background: #fd8197;
						color: #fff;
						padding: 2px 6px;
						border-radius: 4px;
						margin-right: 6px;
					}
				}

				.p {
					font-size: 13px;

					.span {
						display: inline-block;
						color: #fd8197;
					}

					color:#666;
				}
			}

			.answers-a {
				display: flex;
				justify-content: space-between;
				margin-top: 16rpx;

				span {
					font-size: 13px;
					display: block;
					background: #1bca8a;
					color: #fff;
					border-radius: 4px;
					margin-right: 6px;
					width: 108rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
				}

				p {
					color: #666;
					font-size: 13px;
					line-height: 18px;
				}
			}
		}
	}

	.foot-copy {
		width: 700rpx;
		margin: 0 auto;
		color: #333;
		font-size: 24rpx;
		line-height: 40rpx;
		text-align: left;
		margin-bottom: 30rpx;
		margin-top: 40rpx;
	}

	.shop-history {
		margin-top: 20rpx;
		background: #fff;
		padding-bottom: 40rpx;

		h3 {
			width: 690rpx;
			margin: 0 auto;
			border-bottom: 1px solid #eee;
			padding: 30rpx 0 20rpx 0;
			font-size: 28rpx;
			color: #343434;
		}

		div {
			border: 1px solid #eee;
			width: 690rpx;
			margin: 0 auto;
			margin-top: 20rpx;

			.shop-history-head {
				display: flex;
				justify-content: space-between;

				li {
					width: 20%;
					text-align: center;
					height: 56rpx;
					line-height: 56rpx;
					background: #f5f5f5;
					color: #343434;
					font-weight: bold;
					font-size: 24rpx;
				}
			}

			.shop-history-list {
				.shop-history-list-item {
					border-bottom: 1px solid #eee;

					&:nth-last-of-type(1) {
						border-bottom: none
					}

					ul {
						display: flex;
						justify-content: space-between;

						li {
							flex: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							text-align: center;
							height: 56rpx;
							line-height: 56rpx;
							color: #343434;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}

	.service-title {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		position: relative;
		color: #343434;
		font-size: 32rpx;
		font-weight: bold;
		border-bottom: 1rpx solid #eee;

		span {
			position: absolute;
			right: 26rpx;
			top: -6rpx;
			font-size: 24rpx;
			color: #a5a5a5;
		}
	}

	.service-content {
		padding: 20rpx;
		width: 710rpx;
		height: 700rpx;

		.service-desc-title {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 30rpx;
			color: #181818;
			margin-bottom: 20rpx;

			i {
				display: block;
				width: 15rpx;
				height: 15rpx;
				border-radius: 50%;
				background: #ff2150;
				margin-right: 10rpx;
			}
		}
	}

	.service-desc-cont {
		color: #7f7f7f;
		font-size: 26rpx;
		margin-bottom: 20rpx;
		line-height: 44rpx;
	}

	.service-btn {
		width: 690rpx;
		margin: 0 auto;
		background: #ff2150;
		font-size: 28rpx;
		color: #fff;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.gg-cont {
		min-height: 800rpx;
		position: relative;
	}

	.goods-dialog-list {
		width: 710rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		padding-top: 30rpx;
		border-bottom: 1px solid #eee;
		padding-bottom: 30rpx;
		position: relative;

		.hd-icon {
			position: absolute;
			right: 26rpx;
			top: 20rpx;
			font-size: 24rpx;
			color: #a5a5a5;
		}

		img {
			width: 188rpx;
			height: 188rpx;
			position: absolute;
			top: -72rpx;
			border-radius: 11rpx;
			border: 1px solid #eee;

		}

		.goods-dialog-cont {
			width: 488rpx;
			margin-left: 215rpx;

			h3 {
				color: #ff2150;
				font-size: 28rpx;
			}

			p {
				color: #999;
				font-size: 24rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-top: 8rpx;
			}
		}
	}

	.fications-content {
		padding: 20rpx;
		width: 710rpx;
		max-height: 300rpx;
	}

	.dialog-fications {
		h3 {
			color: #333;
			font-size: 28rpx;
			margin-bottom: 10rpx;
		}

		.dialog-fications-list {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			.noImg {
				width: auto !important;
				height: auto !important;
				font-size: 24rpx;
				background: #eee;
				padding: 4rpx 8rpx;
				border-radius: 4rpx;
				color: #666;

				&.active {
					background: #ff2150;
					color: #fff;
				}
			}

			.dialog-fications-item {
				width: 80rpx;
				height: 80rpx;
				margin-right: 14rpx;
				margin-bottom: 20rpx;

				img {
					width: 100%;
					height: 100%;

					&.active {
						border: 1px solid red;
					}
				}
			}
		}
	}

	.goods-num {
		width: 710rpx;
		border-top: 1rpx solid #eee;
		margin: 0 auto;
		padding-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		h3 {
			color: #333;
			font-size: 28rpx;
			margin-bottom: 10rpx;
		}

		div {
			display: flex;
			justify-content: flex-start;
			margin-top: 10rpx;

			span {
				width: 60rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				color: #333;
				font-size: 30rpx;
				background: #f7f7f7;
				margin-right: 4rpx;

				&:nth-of-type(2) {
					width: auto;
					padding: 0 30rpx;
				}

				&:nth-of-type(3) {
					color: #ff2150;
				}
			}
		}
	}

	.goods-btns {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;

		view {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 28rpx;
			color: #fff;
			background: #ed1475;
		}
	}
</style>
